<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Animations: Pivots</title>
    <meta name="description" content="Animations: Pivots - A-Frame">
    <script src="../../../dist/aframe.js"></script>
  </head>
  <body>
    <a-scene>
      <a-assets>
        <a-mixin id="cylinder"
                 geometry="primitive: cylinder; height: 2; openEnded: true; radius: 2"
                 material="side: double">
        <a-mixin id="scale" attribute="scale" from="1 1.125 1" to="1 0 1"
                 dur="2000"></a-mixin>
        <img id="background" src="../../assets/img/gray-gradient.jpg">
      </a-assets>

      <a-entity position="0 0 8">
        <a-camera user-height="0"></a-camera>
      </a-entity>

      <!-- 1 -->
      <!-- Animate cylinder scales on the Y-axis. -->
      <a-entity position="-5 0 0">
        <a-cylinder mixin="cylinder" position="0 2 0" color="#4CC3D9">
          <a-animation mixin="scale"></a-animation>
        </a-cylinder>

        <a-cylinder mixin="cylinder" position="0 -2 0" color="#7BC8A4">
          <a-animation mixin="scale"></a-animation>
        </a-cylinder>

      </a-entity>

      <!-- 2 -->
      <!-- Animate cylinder scales on the Y-axis. -->
      <!-- Move cylinder pivots to top and bottom edges using pivot and position. -->
      <a-entity>
        <a-cylinder mixin="cylinder" position="0 1 0" pivot="0 1 0" color="#4CC3D9">
          <a-animation mixin="scale"></a-animation>
        </a-cylinder>

        <a-cylinder mixin="cylinder" position="0 -1 0" pivot="0 -1 0" color="#7BC8A4">
          <a-animation mixin="scale"></a-animation>
        </a-cylinder>
      </a-entity>

      <!-- 3 -->
      <!-- Animate the cylinder scales on the Y-axis -->
      <!-- Move cylinder pivots to top and bottom edges using pivot and position. -->
      <!-- Animate the parent entity scale on the Y-axis. -->
      <a-entity position="5 0 0">
        <a-animation mixin="scale" from="1 0 1" to="1 1 1"></a-animation>

        <a-cylinder mixin="cylinder" position="0 2 0" pivot="0 -1 0" color="#4CC3D9">
          <a-animation mixin="scale"></a-animation>
        </a-cylinder>

        <a-cylinder mixin="cylinder" position="0 -2 0" pivot="0 1 0" color="#7BC8A4">
          <a-animation mixin="scale"></a-animation>
        </a-cylinder>
      </a-entity>

      <a-sky src="#background"></a-sky>
      <a-light type="directional" color="#FFF" intensity="0.2" position="-1 2 1"></a-light>
      <a-light type="ambient" color="#FFF"></a-light>
    </a-scene>
  </body>
</html>
